<template>
  <view class="photo">
	  <view><p @click="goBack">返回</p></view>
      <view> <img class="da" ref="img1" /></view>
      <view> <img class="zhong" ref="img2" /></view>
	  <view> <img class="xiao" ref="img3" /></view>
  </view>
</template>

<script>
import Bus from '../utils/EventBus';
import store from '../store/index.js'

	export default {
	 data(){
		return{
		 removeSX:'', 
		 shengXiaoTimer1:null,
		 shengXiaoTimer2:null,
		 shengXiaoTimer3:null,
		 sliderData:[],	//老鼠，兔，蛇 //牛，虎，龙，马，猪 //羊，猴，鸡，狗 
		 shuData:[
			{url:'../../static/2x/01鼠/left-01.png'},
			{url:'../../static/2x/01鼠/left-02.png'},
			{url:'../../static/2x/01鼠/left-03.png'},
			{url:'../../static/2x/01鼠/left-04.png'},
			{url:'../../static/2x/01鼠/left-05.png'},
			{url:'../../static/2x/01鼠/left-06.png'},
			{url:'../../static/2x/01鼠/left-07.png'}
		   ],
		 niuData:[
		    {url:'../../static/2x/02牛/left-01.png'},
			{url:'../../static/2x/02牛/left-02.png'},
			{url:'../../static/2x/02牛/left-03.png'},
			{url:'../../static/2x/02牛/left-04.png'},
			{url:'../../static/2x/02牛/left-05.png'},
			{url:'../../static/2x/02牛/left-06.png'}
		 ],
		 huData:[
		    {url:'../../static/2x/03虎/left-01.png'},
			{url:'../../static/2x/03虎/left-02.png'},
			{url:'../../static/2x/03虎/left-03.png'},
			{url:'../../static/2x/03虎/left-04.png'},
			{url:'../../static/2x/03虎/left-05.png'}
		 ],
		 tuData:[
		    {url:'../../static/2x/04兔/left-01.png'},
			{url:'../../static/2x/04兔/left-02.png'},
			{url:'../../static/2x/04兔/left-03.png'},
			{url:'../../static/2x/04兔/left-04.png'},
			{url:'../../static/2x/04兔/left-05.png'},
			{url:'../../static/2x/04兔/left-06.png'}
		 ],
		 longData:[
			 {url:'../../static/2x/05龙/left-01.png'},
			 {url:'../../static/2x/05龙/left-02.png'},
			 {url:'../../static/2x/05龙/left-03.png'},
			 {url:'../../static/2x/05龙/left-04.png'},
			 {url:'../../static/2x/05龙/left-05.png'},
			 {url:'../../static/2x/05龙/left-06.png'},
		 ],
		 sheData:[
			 {url:'../../static/2x/06蛇/left-01.png'},
			 {url:'../../static/2x/06蛇/left-02.png'},
			 {url:'../../static/2x/06蛇/left-03.png'},
			 {url:'../../static/2x/06蛇/left-04.png'},
			 {url:'../../static/2x/06蛇/left-05.png'},
			 {url:'../../static/2x/06蛇/left-06.png'},
		 ],
		 maData:[
		    {url:'../../static/2x/07马/left-01.png'},
			{url:'../../static/2x/07马/left-02.png'},
			{url:'../../static/2x/07马/left-03.png'},
			{url:'../../static/2x/07马/left-04.png'}
		 ],
		 yangData:[
			 {url:'../../static/2x/08羊/left-01.png'},
			 {url:'../../static/2x/08羊/left-02.png'},
			 {url:'../../static/2x/08羊/left-03.png'},
			 {url:'../../static/2x/08羊/left-04.png'},
			 {url:'../../static/2x/08羊/left-05.png'},
			 {url:'../../static/2x/08羊/left-06.png'},
			 {url:'../../static/2x/08羊/left-07.png'},
		 ],
		 houData:[
			 {url:'../../static/2x/09猴/left-01.png'},
			 {url:'../../static/2x/09猴/left-02.png'},
			 {url:'../../static/2x/09猴/left-03.png'},
			 {url:'../../static/2x/09猴/left-04.png'},
		 ],
		 jiData:[
			 {url:'../../static/2x/10鸡/left-01.png'},
			 {url:'../../static/2x/10鸡/left-02.png'},
			 {url:'../../static/2x/10鸡/left-03.png'},
			 {url:'../../static/2x/10鸡/left-04.png'},
			 {url:'../../static/2x/10鸡/left-05.png'},
			 {url:'../../static/2x/10鸡/left-06.png'},
		 ],
		 gouData:[
			 {url:'../../static/2x/11狗/left-01.png'},
			 {url:'../../static/2x/11狗/left-02.png'},
			 {url:'../../static/2x/11狗/left-03.png'},
			 {url:'../../static/2x/11狗/left-04.png'},
			 {url:'../../static/2x/11狗/left-05.png'},
			 {url:'../../static/2x/11狗/left-06.png'},
		 ],
		 zhuData:[
			 {url:'../../static/2x/12猪/left-01.png'},
			 {url:'../../static/2x/12猪/left-02.png'},
			 {url:'../../static/2x/12猪/left-03.png'},
			 {url:'../../static/2x/12猪/left-04.png'},
			 {url:'../../static/2x/12猪/left-05.png'},
			 {url:'../../static/2x/12猪/left-06.png'},
			 {url:'../../static/2x/12猪/left-07.png'}
		 ]
		}
	 },
	 computed:{
          sxid(){
			  return store.state.SX
		  }		 
	 },
	 // props:{
  //       sxid:{
		// 	type: Number
		// }
	 // },
	 methods:{
		pdShengXiao(){
			console.log(this.sxid)
		  
			switch(this.sxid){
              case 1:
			     this.sliderData = this.shuData;
                 break;
			  case 2:
				 this.sliderData = this.niuData;
				 break;
			  case 3:
			     this.sliderData = this.huData;
				 break;
			  case 4:
				 this.sliderData = this.tuData;
				 break;
			  case 5:
				 this.sliderData = this.longData;
				 break;
			  case 6:
			     this.sliderData = this.sheData;
				 break;
			  case 7:
			     this.sliderData = this.maData;
			  	 break;
			  case 8:
				 this.sliderData = this.yangData;
				 break;
			  case 9:
				 this.sliderData = this.houData;
				 break;
			  case 10:
			   this.sliderData = this.jiData;
				 break;
			  case 11:
			   this.sliderData = this.gouData;
				 break;
			  case 12:
				 this.sliderData = this.zhuData;
				 break;
			  default:
				  break;
			}
			//判断生肖大小的分类//老鼠，兔，蛇 //牛，虎，龙，马，猪 //羊，猴，鸡，狗 
			switch(this.sxid){
              case 1:
			     this.shengxiaoImg3()
                 break;
			  case 2:
			     this.shengxiaoImg1()
				 break;
			  case 3:
			     this.shengxiaoImg1()
				 break;
			  case 4:
			     this.shengxiaoImg3()
				 break;
			  case 5:
			     this.shengxiaoImg1()
				 break;
			  case 6:
			     this.shengxiaoImg3()
				 break;
			  case 7:
			     this.shengxiaoImg1()
			  	 break;
			  case 8:
			     this.shengxiaoImg2()
				 break;
			  case 9:
			     this.shengxiaoImg2()
				 break;
			  case 10:
			     this.shengxiaoImg2()
				 break;
			  case 11:
			     this.shengxiaoImg2()
				 break;
			  case 12:
			     this.shengxiaoImg1()
				 break;
			  default:
				  break;
			}
			
		},
		shengxiaoImg1(){
			    // console.log(this.sliderData)
			    let i = 0
				// console.log(this.sliderData.length)
				 this.shengXiaoTimer1 = setInterval(()=>{
			        i++
					if(i > this.sliderData.length - 1){
                      i = 0
					}
					// console.log(this.sliderData[i].url)
				
						this.$refs.img1.src = this.sliderData[i].url
					
		        },150)
				this.$refs.img1.style.display = 'block'
				// this.$refs.img3.style.display = 'none'
			},
		shengxiaoImg2(){
				// console.log(this.sliderData)
				let i = 0
				// console.log(this.sliderData.length)
			 this.shengXiaoTimer2 = setInterval(()=>{
				    i++
					if(i > this.sliderData.length - 1){
			          i = 0
					}
					// console.log(this.sliderData[i].url)
					
						this.$refs.img2.src = this.sliderData[i].url
					
			    },150)
                this.$refs.img2.style.display = 'block'
				// this.$refs.img3.style.display = 'none'
			},
		shengxiaoImg3(){
				// console.log(this.sliderData)
				let i = 0
				// console.log(this.sliderData.length)
				this.shengXiaoTimer3 = setInterval(()=>{
				    i++
					if(i > this.sliderData.length - 1){
			          i = 0
					}
					// console.log(this.sliderData[i].url)
			
						this.$refs.img3.src = this.sliderData[i].url
			    },150)
				// console.log(typeof(shengXiaoTimer3))
				this.$refs.img3.style.display = 'block'
				// this.$refs.img2.style.display = 'none'
			},
		clearShengXiao(){
			console.log('关闭了定时器')
			clearInterval(this.shengXiaoTimer1)
			clearInterval(this.shengXiaoTimer2)
			clearInterval(this.shengXiaoTimer3)
			this.$refs.img1.style.display = 'none' 
			this.$refs.img2.style.display = 'none'
			this.$refs.img3.style.display = 'none'
		},
		goBack(){
		    uni.navigateTo({
		      url: '/pages/login/login'
		    })
			Bus.$emit('ClearInter')
			this.clearShengXiao()
		}
	 },
	//  mounted() {
	
		 
	// },
	created(){
		Bus.$on('SendClear',(ClearSX)=>{
			this.removeSX = ClearSX
			console.log(ClearSX)
		})
		
		// // console.log(this.removeSX)
		this.$nextTick(()=>{
			this.pdShengXiao()
		})
	},
	watch:{
		// this.$nexTick(()=>{
			removeSX(newVal,oldVal){
                // console.log(newVal)
				if(newVal == 'ClearShengXiao'){
					this.clearShengXiao()
				}
			}
		// })
	}
 }

</script>

<style scoped>
.photo {
	/* display: none; */
  position: relative;
  width: 100vh;
  height: 40vh;
  font-size: 20px;
  /* background-color: black; */
}   

.da {
  display: none;
  position: absolute;
  top: 550rpx;
  left: 200rpx;
  width: 40vw;
  height: 28vw;
  /* margin-left: 150px; */
}

.zhong {
	display: none;
   position: absolute;
   top: 570rpx;
   left: 260rpx;
   width: 28vw;
   height: 20vw;
}

.xiao {
	display:none;
  position: absolute;
  top: 580rpx;
  left: 300rpx;
  width: 20vw;
  height: 10vw;
  border:none;
}



</style>
